<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
    <style type="text/css">
		header {
            margin-bottom: 15px;
        }
        .aui-btn {
            margin-top: 15px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <header class="aui-bar aui-bar-nav" id="header" style="padding-top: 20px; position: fixed;">
        <div class="aui-pull-left">
            <i class="aui-iconfont aui-icon-left" onclick="closeWin();"></i>
        </div>
        <div class="aui-title">账号注册</div>
        <div class="aui-pull-right">
            <a class="aui-btn aui-iconfont aui-icon-refresh" href=""></a>
        </div>
    </header>
    <div id="header-bottom"></div>
    <div class="aui-content-padded aui-margin-b-15 aui-padded-t-15">
        <ul class="aui-list aui-form-list">
            <!-- 账号 -->
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        <i class="aui-iconfont aui-icon-my"></i>&nbsp;账号
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" id="regist-username" placeholder="用户名" value="" />
                    </div>
                </div>
            </li>
            <!-- 密码 -->
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        <i class="aui-iconfont aui-icon-lock"></i>&nbsp;密码
                    </div>
                    <div class="aui-list-item-input">
                        <input type="password" id="regist-password" placeholder="密码" value="" />
                    </div>
                </div>
            </li>
            <!-- 密码2 -->
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        <i class="aui-iconfont aui-icon-lock"></i>&nbsp;确认
                    </div>
                    <div class="aui-list-item-input">
                        <input type="password" id="regist-password-2" placeholder="再次输入密码" value="" />
                    </div>
                </div>
            </li>
            <!-- 邮箱 -->
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        <i class="aui-iconfont aui-icon-mail"></i>&nbsp;邮箱
                    </div>
                    <div class="aui-list-item-input">
                        <input type="email" id="regist-mail" placeholder="用于找回密码" value="" />
                    </div>
                </div>
            </li>
        </ul>
        <p><div class="aui-btn aui-btn-info aui-btn-block aui-btn-sm" onclick="cmdRegist();">注册</div></p>
        <p><div class="aui-btn aui-btn-block aui-btn-sm" onclick="cmdReturn();">返回登录</div></p>
    </div>
    <div class="aui-text-center aui-font-size-14" style="position:fixed; bottom:10px; width:100%;">
        <a href="#" class="aui-text-info" onclick="openWin('forget_win');">找回密码</a>
        <span class="aui-text-info">&nbsp;|&nbsp;</span>
        <a href="#" class="aui-text-info" onclick="openWin('about_win');">关于我们</a>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-toast.js" ></script>
<script type="text/javascript">
    var toast = new auiToast();
    apiready = function(){
        api.parseTapmode();
        //不支持沉浸式效果
        if (!api.statusBarAppearance) {
            $api.byId('header').style.paddingTop = 0;
        }
        //顶部导航栏高度抵消
        $api.byId('header-bottom').style.marginTop = $api.offset($api.byId('header')).h + 'px';
        
    }

    /** 注册命令 */
    function cmdRegist() {
        var regist = cheakForm();
        if (regist.cheak) {
            toast.loading({
                title:"注册中",
                duration:200
            },function(ret){
                sendPostRegist(regist.msg, function(ret){
                    toast.hide();
                    if (ret.uid > 0) {
                        toast.success({ title: '注册成功', duration:800 });
                        setTimeout(function(){
                            cmdReturn();
                        }, 500);
                    } else {
                        api.alert({ title: '注册失败', msg: ret.msg });
                    }
                });
            });
        } else {
            api.alert( { msg: regist.msg } );
            $api.byId(regist.id).focus;
        }
    }

    /** 校验表单 */
    function cheakForm() {
        var ret = {cheak: false};
        var username = $api.byId('regist-username').value;
        var password = $api.byId('regist-password').value;
        var password2= $api.byId('regist-password-2').value;
        var email    = $api.byId('regist-mail').value;
        //验证用户名
        ret.id = 'regist-username';
        if (/\s/.test(username)) {
            ret.msg = '账号不能包含空格。';
            return ret;
        } else if (/^\d/.test(username)) {
            ret.msg = '账号不能以数字开头。';
            return ret;
        } else if (username.length < 2) {
            ret.msg = '账号长度必须大于2个字符！';
            return ret;
        }
        //验证密码
        ret.id = 'regist-password';
        if (password !== password2) {
            ret.msg = '两次输入的密码不相同...';
            return ret;
        } else if (/\s/.test(password)) {
            ret.msg = '密码不能包含空格。';
            return ret;
        } else if (password.length < 6) {
            ret.msg = '密码长度必须大于6个字符！';
            return ret;
        }
        //验证邮箱
        ret.id = 'regist-mail';
        if (!(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,5})$/.test(email))) {
            ret.msg = '邮箱格式有误，请重新输入。';
            return ret;
        }
        //验证通过
        ret.cheak = true;
        ret.msg = {
            regist_username: username,
            regist_password: password,
            regist_email: email,
            regist_submit: 'xxjzAUI'
        };
        return ret;
    }

    /** 发送Post数据 */
    function sendPostRegist(postData, callback) {
        api.ajax({
            url: 'http://qxu1192050221.my3w.com/xxjzApp/index.php/Home/Login/regist',
            method: 'post',
            data: {
                values: postData
            }
        },function(ret, err){
            if (ret) {
                callback(ret);
            } else {
                callback({
                    uid: 0,
                    msg: err['msg']+'（请联系管理员）'
                });
            }
        });
    }

    /** 返回命令 */
    function cmdReturn() {
        api.closeToWin({
            name: 'root'
        });
    }

    /** 打开窗口 */
    function openWin(name){
        api.openWin({
            name: ''+name+'',
            url: ''+name+'.html',
            slidBackEnabled: true,
            slidBackType: 'edge',
            animation: {
                type: 'movein',
                subtype: 'from_bottom'
            },
            delay: 100
        });
    }

    /** 关闭窗口 */
    function closeWin(){
        api.closeWin({
        });
    }

</script>
</html>